<template>
	<view class="container">
		<view style="font-weight: bold;"></view>
		<!-- 国外 -->
		<view class="exhibition">
			<view style="font-size: 35rpx;font-weight: bold;margin-left: 20rpx;">月亮与六便士</view>
			<view style="font-weight: bold;color: #ccc;margin-left: 20rpx;">贫穷的纠缠，病魔的折磨他的意识...</view>
			<view>
				<scroll-view scroll-x="true" class="moon_container">
					<block  v-for="(item, index) in moon" :key="index">
						<view @click="toDetail()" class="item">
							<view class="img">
								<image class="img_slider" :src="item.img" mode="widthFix"></image>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 国内 -->
		<view class="exhibition">
			<view style="font-size: 35rpx;font-weight: bold;margin-left: 20rpx;">夜晚也很美</view>
			<view style="font-weight: bold;color: #ccc;margin-left: 20rpx;">屋内明黄色的灯光让气氛变得温和...</view>
			<view>
				<scroll-view scroll-x="true" class="moon_container">
					<block v-for="(item, index) in night" :key="index">
						<view class="item">
							<view class="img">
								<!-- @tap="ViewImage" :data-url="night[index]" -->
								<image class="img_slider" :src="item.img" mode="widthFix">
								</image>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 国内 -->
		<view class="exhibition" >
			<view style="font-size: 35rpx;font-weight: bold;margin-left: 20rpx;">夜晚也很美</view>
			<view style="font-weight: bold;color: #ccc;margin-left: 20rpx;">屋内明黄色的灯光让气氛变得温和...</view>
			<view>
				<scroll-view scroll-x="true" class="moon_container">
					<block v-for="(item, index) in life" :key="index">
						<view class="item">
							<view class="img">
								<!-- @tap="ViewImage" :data-url="night[index]" -->
								<image class="img_slider" :src="item.img" mode="widthFix">
								</image>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import "animate.css"
	export default {
		data() {
			return {
				moon: [{
						img: "../../static/sprt_images/moon_one.png"
					},
					{
						img: "../../static/sprt_images/moon_two.png"
					},
					{
						img: "../../static/sprt_images/moon_three.png"
					},
					{
						img: "../../static/sprt_images/moon_four.png"
					},
					{
						img: "../../static/sprt_images/moon_five.png"
					},
				],
				night: [{
					img: "../../static/sprt_images/night_one.png"
				}, {
					img: "../../static/sprt_images/night_two.png"
				}, {
					img: "../../static/sprt_images/night_three.png"
				}, {
					img: "../../static/sprt_images/night_four.png"
				}, {
					img: "../../static/sprt_images/night_five.png"
				}],
				life: [
					{
						img: "../../static/sprt_images/life_one.png"
					},
					{
						img: "../../static/sprt_images/life_two.png"
					},
					{
						img: "../../static/sprt_images/life_three.png"
					},
					{
						img: "../../static/sprt_images/life_four.png"
					},
					{
						img: "../../static/sprt_images/life_five.png"
					},
				],
				imgUrl: "",
				imgBase: "",
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url:"/pages/detail-abroad/index"
				})
			}
			// // ViewImage(e) {
			// // 	console.log(e)
			// // 	//console.log(this.night)
			// // 	let night = this.night
			// // 	//console.log(night)
			// // 	console.log(e.target.dataset.url.img)
			// // 	 uni.previewImage({
			// // 	            current:e.target.dataset.url.img, //预览图片的下标
			// // 	            urls: night//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			// // 	   })
			// // },
			// // 选择图片
			// chooseImg() {
			// 	uni.chooseImage({
			// 	    count: 1, //默认9
			// 	    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 	    sourceType: ['album'], //从相册选择
			// 	    success: function (res) {
			// 	        console.log(JSON.stringify(res.tempFilePaths));
			// 			this.imgUrl = JSON.stringify(res.tempFilePaths);
			// 	    }
			// 	});
			// },
			// getSimiliarImage() {
			// 	let imgBase64 = this.getBase64ImageUrl(this.imgUrl)
			// 	let apiKey = "adminimda-10101-2022.04.10.11.18.13-b8427ee9a65432adf7f4f485fda994ff"
			// 	uni.request({
			// 		url:"http://apisim20.wozhitu.com:8084/vsearchtech/api/v1.0/apisim_search",
			// 		method: "POST",
			// 		data: {
			// 			apikey:apiKey,
			// 			imgurl: this.imgUrl
			// 		},
			// 		success: res=> {
			// 			console.log(res)
			// 		}
			// 	})
			// 	//console.log(imgBase64.split(",")[1])
			// 	// uni.request({
			// 	// 	url:"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=exGKX4PFLowGryUuSTun879E&client_secret=18qKzqRmpWK1lTAlAsEsRkpWUQVtikFM",
			// 	// 	method: 'POST',
			// 	// 	success: res=> {
			// 	// 		//console.log(res.data.access_token)
			// 	// 		uni.request({
			// 	// 			url:"https://aip.baidubce.com/rest/2.0/image-classify/v1/realtime_search/similar/search?access_token="+res.data.access_token,
			// 	// 			method: 'POST',
			// 	// 			data: {
			// 	// 				image: imgBase64.split(",")[1]
			// 	// 			},
			// 	// 			header: {
			// 	// 				'Content-Type': 'application/x-www-form-urlencoded'
			// 	// 			},
			// 	// 			success: res=> {
			// 	// 				console.log(res)
			// 	// 			}
			// 	// 		})
			// 	// 	}
			// 	// })
			// },
			// getBase64ImageUrl(url, imgType) {
			// 	if(!imgType){
			// 	  imgType="image/png";
			// 	}
			// 	var img=new Image(); 
			// 	img.src= url;
			// 	img.crossOrigin="anonymous";
			// 	var xhr = new XMLHttpRequest();
			// 	//通过下面两次同步请求获取同一个图片，如果请求成功来猜测上面的图片已经异步加载完成
			// 	for(var i=0;i<2;i++){
			// 		xhr.open('GET', url, false);
			// 		xhr.send(null);
			// 	}
			// 	var canvas = document.createElement("canvas");
			// 	var ctx = canvas.getContext("2d");  
			// 	ctx.drawImage(img, 0, 0);
			// 	var dataURL = canvas.toDataURL(imgType);
			// 	return dataURL;
			// }
		}
	}
</script>

<style>
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.exhibition {
		display: flex;
		width: 95%;
		margin-left: 5%;
		/* border: #000000 2rpx solid; */
		flex-direction: column;
		margin-top: 50rpx;
	}

	.img_slider {
		animation: slideInRight 1.2s;
	}

	.moon_container {
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		height: 60%;
		padding: 20rpx;
		margin: 0 auto;
	}

	.item {
		width: auto;
		margin-right: 20upx;
		display: inline-block;
		vertical-align: top;
	}

	.img {
		display: inline-block;
	}

	image {
		width: 240rpx;
		border-radius: 6upx;
	}
</style>
